<template>
<!--  收费标准设置-->
  <div class="repair-container">
    <!--搜索-->
    <section class="direct-content-wrapper">
      <!-- 搜索区 -->
      <Search
        :search-data="searchParams"
        :search-options="searchOptions"
        @clearAll="resetDate"
        @onSearch="onSearch"
      />
    </section>
    <!--  列表-->
    <div class="table_box">
      <div class="top_button">
        <el-button type="primary" @click="addDetail">新增</el-button>
      </div>
      <div>
        <Table
          ref="table"
          class="table_two"
          :table-data="tableData"
          @handleNumChange="handleNumChange"
          @handleSelectionChange="handleSelectionChange"
          @handleSizeChange="handleSizeChange"
        >
          <el-table-column
            slot="action"
            align="center"
            fixed="right"
            label="操作"
            width="240"
          >
            <template slot-scope="scope">
              <el-tooltip content="查看收费标准详情" placement="bottom">
                <el-button type="info" icon="el-icon-postcard" size="mini" @click="queryDetail(scope.row)" />
              </el-tooltip>
              <el-tooltip content="修改收费标准" placement="bottom">
                <el-button size="mini" type="primary" icon="el-icon-edit" @click="updateDetail(scope.row)" />
              </el-tooltip>
              <el-tooltip content="删除收费标准" placement="bottom">
                <el-button size="mini" type="danger" icon="el-icon-set-up" @click="deleteDetail(scope.row)" />
              </el-tooltip>
            </template>
          </el-table-column>
        </Table>
      </div>
    </div>
    <!--    新增修改详情弹窗-->
    <el-dialog
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      :title="titleInfo"
      width="35%"
    >
      <MyForm
        ref="myForm"
        :form="formData.form"
        :inline="false"
        :label-width="formData.labelWidth"
        :options="formData.options"
        :rules="formData.rules"
        @changeSelect="changeSelect"
        @clearValidate="clearValidate"
        @validate="validate"
      />
    </el-dialog>
  </div>
</template>

<script>

import Search from '@/components/search/index.vue'
import Table from '../../components/table/index'
import MyForm from '@/components/form/form.vue'
import formData from '@/utils/formData.json'

export default {
  name: 'FeeStandardSetting',
  components: {MyForm, Search, Table},
  data() {
    return {
      dialogVisible: false, // 弹窗
      titleInfo: '新增', // 弹窗名称
      // 分页参数
      pagination: {
        pageSize: 10,
        pageNum: 1
      },
      // 搜索条件
      searchParams: {
        type1: '', // 收费标准名称
        type2: '' // 收费类型
      },
      // 搜索表单配置项
      searchOptions: [
        {
          type: ['input'],
          label: '收费标准名称：',
          prop: 'type1',
          width: '180px',
          placeholder: '请输入收费标准名称'
        },
        {
          type: ['select'],
          label: '收费类型：',
          prop: 'type2',
          width: '180px',
          placeholder: '请选择收费类型',
          data: [
            {
              value: 1,
              label: '物业费'
            },
            {
              value: 2,
              label: '车位费'
            }
          ]
        }
      ],
      // 表格默认字段
      tableData: {
        columns: [
          {
            index: true,
            indexMethod(index) {
              return index + 1
            }
          },
          {
            prop: '0',
            label: '收费标准名称'
          },
          {
            prop: '1',
            label: '收费类型'
          },
          {
            prop: '2',
            label: '标准有效起始日期'
          },
          {
            prop: '3',
            label: '计费单价'
          },
          {
            prop: '4',
            label: '计费方式'
          },
          {
            slot: 'action'
          }
        ],
        data: [
          {
            0: '收费标准名称111',
            1: '物业费',
            2: '标准有效起始日期',
            3: '计费单价',
            4: '单价*面积'
          },
          {
            0: '收费标准名称222',
            1: '车位费',
            2: '标准有效起始日期',
            3: '计费单价',
            4: '固定单价'
          }
        ],
        total: 0
      },
      // form表单
      formData: {}
    }
  },
  mounted() {
    // 默认form数据
    this.resetForm()
    // 初始化表格数据
    this.initList()
  },
  methods: {
    // 初始化表格数据
    initList() {
    },
    // 新增
    addDetail() {
      this.titleInfo = '新增'
      this.dialogVisible = true
    },
    // 查看
    queryDetail(row) {
      this.titleInfo = '查看'
      this.dialogVisible = true
    },
    // 修改
    updateDetail(row) {
      this.titleInfo = '修改'
      this.dialogVisible = true
    },
    // 删除
    deleteDetail(row) {
      this.$confirm('请确认是否删除该收费标准?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 表单确定按钮
    validate() {
      const that = this
      switch (that.titleInfo) {
        case '新增':
          console.log(this.formData.form, '新增')
          break
        case '修改':
          console.log(this.formData.form, '修改')
          break
        default:
          that.dialogVisible = false
          break
      }
    },
    // 表单取消按钮
    clearValidate() {
      this.dialogVisible = false
    },
    // 选择select
    changeSelect(val, item) {
      // console.log(val, item)
    },
    // 重置
    resetDate() {
      this.resetPage()
      this.initList()
    },
    // 搜索
    onSearch(searchFormData) {
      console.log(searchFormData, this.searchParams)
    },
    // 重置分页
    resetPage() {
      this.pagination = {
        pageSize: 10,
        pageNum: 1
      }
      this.$refs.table.pagination = {
        pageNum: 1,
        pageSize: 10
      }
    },
    // 重置form表单
    resetForm() {
      this.formData = JSON.parse(JSON.stringify(formData.feeStandardSetting))
    },
    // 分页选择
    handleNumChange(pagination) {
      this.pagination = pagination
      this.initList()
      // console.log(pagination, '改变页数')
    },
    handleSizeChange(pagination) {
      this.pagination = pagination
      this.initList()
      // console.log(pagination, '改变条数')
    },
    // 选择表格数据
    handleSelectionChange(val) {
      // console.log(val, '选择的表格数据')
    }
  }
}
</script>

<style lang="scss" scoped>
.repair-container {
  background: #f0f2f5;
  padding: 20px;
}

.direct-content-wrapper {
  margin-bottom: 20px;
}

.table_box {
  background: #ffffff;
  padding: 10px;
  border-radius: 5px;
}

.top_button {
  height: 60px;
}

.table_two {
  width: 100%;
}
</style>
